<template>
	<view>
		
		<view style="padding: 40rpx 40rpx 40rpx 40rpx; display: flex; justify-content: space-between; background-color: #FFF;">
			<view style="font-weight: bolder;">选择预售类型：</view>
			<radio-group style="display: flex;" @change="onChangePresellType">
				<label style="display: flex;">
					<view><radio :value="1" :checked="1 == presell_type" /></view>
					<view style="margin-left: 4rpx;">全款预售</view>
				</label>
				
				<label style="display: flex; margin-left: 20rpx;">
					<view><radio :value="2" :checked="2 == presell_type" /></view>
					<view style="margin-left: 4rpx;">定金预售</view>
				</label>
			</radio-group>
		</view>
		
		<view style="background-color: #f0f0f0; height: 16rpx; width: 100%;" />
		
		<view style="padding: 40rpx 40rpx 0rpx 40rpx; display: flex; justify-content: space-between; background-color: #FFF;">
			<view style="font-weight: bolder;">预售活动开始时间：</view>
			<view style="display: flex;">
				<picker mode="date" :start="new Date().format('yyyy-MM-dd')" :value="start_date" @change="onChangeStartDate">
					<view class="uni-input">{{start_date}}</view>
				</picker>
				<picker mode="time" :value="start_time" @change="onChangeStartTime" style="margin-left: 16rpx;">
					<view class="uni-input">{{start_time}}</view>
				</picker>
			</view>
		</view>
		
		<view style="padding: 40rpx 40rpx 40rpx 40rpx; display: flex; justify-content: space-between; background-color: #FFF;">
			<view style="font-weight: bolder;">预售活动结束时间：</view>
			<view style="display: flex;">
				<picker mode="date" :start="new Date().format('yyyy-MM-dd')" :value="end_date" @change="onChangeEndDate">
					<view class="uni-input">{{end_date}}</view>
				</picker>
				<picker mode="time" :value="end_time" @change="onChangeEndTime" style="margin-left: 16rpx;">
					<view class="uni-input">{{end_time}}</view>
				</picker>
			</view>
		</view>
		
		<view style="background-color: #f0f0f0; height: 16rpx; width: 100%;" />
		
		<view v-if="presell_type==2" style="padding: 40rpx 40rpx 0rpx 40rpx; display: flex; justify-content: space-between; background-color: #FFF;">
			<view style="font-weight: bolder;">尾款支付开始时间：</view>
			<view style="display: flex;">
				<picker mode="date" :start="new Date().format('yyyy-MM-dd')" :value="final_start_date" @change="onChangeFinalStartDate">
					<view class="uni-input">{{final_start_date}}</view>
				</picker>
				<picker mode="time" :value="final_start_time" @change="onChangeFinalStartTime" style="margin-left: 16rpx;">
					<view class="uni-input">{{final_start_time}}</view>
				</picker>
			</view>
		</view>
		
		
		<view v-if="presell_type==2" style="padding: 40rpx 40rpx 40rpx 40rpx; display: flex; justify-content: space-between; background-color: #FFF;">
			<view style="font-weight: bolder;">尾款支付结束时间：</view>
			<view style="display: flex;">
				<picker mode="date" :start="new Date().format('yyyy-MM-dd')" :value="final_end_date" @change="onChangeFinalEndDate">
					<view class="uni-input">{{final_end_date}}</view>
				</picker>
				<picker mode="time" :value="final_end_time" @change="onChangeFinalEndTime" style="margin-left: 16rpx;">
					<view class="uni-input">{{final_end_time}}</view>
				</picker>
			</view>
		</view>
		
		<view style="background-color: #f0f0f0; height: 16rpx;width: 100%;" />
		
		<view v-if="!product_presell_id" style="margin: 40rpx 40rpx 0rpx 40rpx; font-weight: bolder; background-color: #FFF;">选择商品：</view>
		<radio-group v-if="!product_presell_id" @change="selectChange($event)" class="prod-lst">
			<label v-for="(item, index) in prod_list" :key="index" class="prod-item">
				<view><radio :value="item.product_id" :checked="item.product_id == cur_prod_id" /></view>
				<view class="prod-name">{{ item.store_name }}</view>
			</label>
		</radio-group>

		<view class="handle"><view class="handle_button" @click="goNextStep">下一步</view></view>
		<view class="handle-placeholder"></view>
	</view>
</template>

<script>
	import { navigateTo, serialize, setStorage, getStorage, Toast, removeStorage, Loading, hideLoading } from '../../../libs/uniApi.js';
	
	import {
	  productLstApi, productDeleteApi, productOffApi, productRecommendApi
	} from "@/api/product";
	
	export default {
		data() {
			let date = new Date();
			date.setDate(date.getDate()+3);
			return {
				cur_prod_id: null,
				prod_list: [],
				presell_type: 1,
				where: {
				  page: 1,
				  limit: 20
				},
				product_presell_id: 0,
				start_date: date.format('yyyy-MM-dd'),
				start_time: '00:00',
				end_date: date.format('yyyy-MM-dd'),
				end_time: '12:00',
				final_start_date: date.format('yyyy-MM-dd'),
				final_start_time: '00:00',
				final_end_date: date.format('yyyy-MM-dd'),
				final_end_time: '12:00',
			}
		},
		onLoad(options) {
			console.log("add_presell::onLoad| options:", options);
			
			this.mer_id = options.mer_id;
			
			if(options.product_presell_id) {
				this.cur_prod_id = options.product_id;
				this.product_presell_id = options.product_presell_id;
				this.presell_type = options.presell_type;
				
				let a = options.start_time.split(" ");
				if(a.length == 2) {
					this.start_date = a[0]
					this.start_time = a[1].substr(0, 5);
				}
				a = options.end_time.split(" ");
				if(a.length == 2) {
					this.end_date = a[0]
					this.end_time = a[1].substr(0, 5);
				}
				
				if(options.final_start_time) {
					a = options.final_start_time.split(" ");
					if(a.length == 2) {
						this.final_start_date = a[0]
						this.final_start_time = a[1].substr(0, 5);
					}
					a = options.final_end_time.split(" ");
					if(a.length == 2) {
						this.final_end_date = a[0]
						this.final_end_time = a[1].substr(0, 5);
					}
				}
				
				uni.setNavigationBarTitle({
				  title: '编辑预售'
				});
			}
			else {
				productLstApi(this.mer_id, this.where).then(
				  res => {
					  this.prod_list.push.apply(this.prod_list, res.data.list);
					  this.cur_prod_id = res.data.list[0].product_id;
				  },
				  error => {
				  }
				);
			}
		},
		methods: {
			goNextStep() {
				const data = getStorage('addGoodsFormData');
				if(data && data.product_id){
					let waitDeleteData = ['addGoodsFormData', 'singleSpecification', 'attrValue', 'modifyPriceData', 'addGoodsSecoundData', 'goodsDis', 'editGoodsDetils'];
					waitDeleteData.forEach(item => {
						if(getStorage(item)) {
							removeStorage(item);
						}
					})
				}
				
				let opt = { mer_id: this.mer_id, product_id: this.cur_prod_id,
					presell_type: this.presell_type, 
					start_time: this.start_date + ' ' + this.start_time, 
					end_time: this.end_date + ' ' + this.end_time,
					final_start_time: this.final_start_date + ' ' + this.final_start_time,
					final_end_time: this.final_end_date + ' ' + this.final_end_time
				};
				if(parseInt(this.product_presell_id) > 0)
					opt.product_presell_id = parseInt(this.product_presell_id);
				navigateTo(1, '/pages/product/addGoods/index', opt);
			},
			
			selectChange(e) {
				this.cur_prod_id = e.detail.value;
			},
			
			onChangePresellType(e) {
				this.presell_type = e.detail.value
			},
			
			onChangeStartDate(e) {
				this.start_date = e.detail.value;
			},
			
			onChangeStartTime(e) {
				this.start_time = e.detail.value;
			},
			
			onChangeEndDate(e) {
				this.end_date = e.detail.value;
			},
			
			onChangeEndTime(e) {
				this.end_time = e.detail.value;
			},
			
			onChangeFinalStartDate(e) {
				this.final_start_date = e.detail.value;
			},
			
			onChangeFinalStartTime(e) {
				this.final_start_time = e.detail.value;
			},
			
			onChangeFinalEndDate(e) {
				this.final_end_date = e.detail.value;
			},
			
			onChangeFinalEndTime(e) {
				this.final_end_time = e.detail.value;
			}
		}
	}
</script>

<style lang="scss" scoped>
page {
	width: 100%;
	height: 100%;
}

$handle_height: 126rpx;

.prod-lst {
	background-color: #FFF;
	.prod-item {
		display: flex;
		padding: 40rpx;
		border-bottom: solid 1px #eee;
			
		.prod-name {
			margin-left: 20rpx;
		}
	}
}

.handle {
	width: 100%;
	height: $handle_height;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 10;
	&_button { // 这里&指代handle，完整是handle_button. by cmh
		width: 690rpx;
		height: 86rpx;
		background: #e93323;
		border-radius: 43px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #ffffff;
	}
}
.handle-placeholder {
	width: 100%;
	height: $handle_height;
	background: #ffffff;
}
</style>
